<template>
  <view class="swim-place">
    <view
      class="swim-place-item"
      v-for="item in swimPlaceList"
      :key="item.id"
      @click="handleItemClick(item)"
      ><view class="swim-place-item-label-text">
        <view class="swim-place-item-label">游泳馆:</view>
        <view class="swim-place-item-value">{{ item.name }}</view>
      </view>
      <view class="swim-place-item-label-text">
        <view class="swim-place-item-label">地址:</view>
        <view class="swim-place-item-value">{{ item.address }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { listSwimPlace } from '@/api/swimPlace.js';

  import { goBack } from '@/utils/app';

  onMounted(() => {
    listSwimPlaceReq();
  });

  const swimPlaceList = ref([]);
  const listSwimPlaceReq = async () => {
    const res = await listSwimPlace();
    const data = res.data || [];
    swimPlaceList.value = data;
  };

  const handleItemClick = (item) => {
    uni.$emit('__selectSwimPlace__', item);
    goBack();
  };
</script>

<style scoped lang="scss">
  .swim-place {
    padding-bottom: 100rpx;
    display: flex;
    flex-direction: column;

    .swim-place-item {
      display: flex;
      flex-direction: column;
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;

      .swim-place-item-label-text {
        display: flex;
        margin-top: 16rpx;
        .swim-place-item-label {
          width: 160rpx;
          color: #202020;
          font-family: PingFang SC;
          font-size: 28rpx;
        }
        .swim-place-item-text {
          color: #202020;
          font-family: PingFang SC;
          font-size: 28rpx;
        }
      }
    }
    .swim-place-item-label-text:first-child {
      margin-top: 0rpx;
    }
  }
</style>
